<template>
    <div>
          <div id="main"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";



//声明周期函数，自动执行初始化
onMounted(() => {
  init();
});
//初始化函数
function init() {
  // 基于准备好的dom，初始化echarts实例
  let Chart = echarts.init(document.getElementById("main"));
  // 绘制图表
  let options = {
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value',
    show: false
  },
  series: [
    {
      data: [80, 160, 110, 40, 30, 70, 90,100,50,130,110,20],
      type: 'bar'
    }
  ]
};

  // 渲染图表
  Chart.setOption(options);
}
</script>

<style scoped>
#main {
  width: 100%;
  height: 80px;
}
</style>